<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="75px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getSchoolItem'></school>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="学校名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="服务名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sServiceName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="收费金额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="收费方式" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.sPayTypeNew?'--':scope.row.sPayTypeNew=='1'?'月收':scope.row.sPayTypeNew=='2'?'年收':'--'}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="收费开始时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sPayStartTime | isNull }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="申请类型" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime==scope.row.sUpdateTime?'首次申请':'修改申请' }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="申请时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime | isNull }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button v-if="scope.row.sStatus == '1'" type="text" class="btn-success" @click="audit(scope.row)">审核</el-button>
                        <span v-if="scope.row.sStatus == '0'">未开通</span>
                        <span v-if="scope.row.sStatus == '2'">已开通</span>
                        <span v-if="scope.row.sStatus == '3'">审核未通过</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 审核 -->
        <audit-service :auditData='auditData' @search='queryData'></audit-service>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import auditService from './auditService';
    import school from 'components/SchoolClasss/school';
    import { pagePayRecord } from 'api/serviceManage';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'serviceAuditList',
        components: { Levelbar, TableLayout, province, city, region, auditService, school },
        data() {
            return { 
                auditData: {
                    dialogState: false,
                    dataList: ''
                },
                loading: true,  
                schoolList: [],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolId: '',
                    schoolName: ''
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {
                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区id
                let fSchoolId = this.query.schoolId;  // 学校id

                pagePayRecord(
                    this.pageQuery.currentpage,
                    this.config.pageSize,
                    provinceId, // 省id
                    cityId, // 市id
                    areaId, // 区id
                    fSchoolId // 学校id
                ).then(response => {
                    this.loading = false;
                    this.tableData = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
            },
            audit(obj) {
                this.auditData.dialogState = true;
                this.auditData.dataList = obj;
            },

            getSchoolItem(schoolId) {
                this.query.schoolId = schoolId;
            }
        }

    }
</script>

<style lang="scss" scoped>

</style>

